<!--ID:login.html-->
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="../libs/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../libs/app.css"/>
    <link href="../css/main.css" rel="stylesheet"/>
    <link href="../css/login.css" rel="stylesheet"/>
</head>

<body>
<div class="head">
    <img src="../images/all-left.png" alt="" class="mui-action-back">
    <p>用户注册</p>
</div>
<div class="context">
    <div><input class="number" id="number" type="tel" maxlength="11" placeholder="请输入手机号码"><img src="../images/suo.png"
                                                                                                alt=""></div>
    <div>
        <input class="password" id="password-1" type="password" placeholder="请输入6~18位密码">
        <img src="../images/photo-num.png" alt="">
    </div>
    <!--<div>-->
    <!--<input class="password" id="password-2" type="password" placeholder="请输入9~18位密码">-->
    <!--<img src="../images/photo-num.png" alt="">-->
    <!--</div>-->
    <div><input class="yan" type="tel" maxlength="6" id="yan" placeholder="请输入验证码">
        <img src="../images/yanzheng.png" alt="">
        <div class="button" id="button">
            <button id="button-button">获取验证码</button>
        </div>
    </div>
    <p><img id="accept" src="../images/yellow-gou.png" alt="">阅读并同意
        <a href="registration-protocol.html"><span>《小马时贷用户协议》</span></a>
    </p>
    <div>
        <button class="sign">注册</button>
    </div>
    <div>
        <p class="back_login mui-action-back">已有账号返回登录</p>
    </div>
</div>
<script src="../libs/mui.min.js"></script>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/url.js"></script>
<script type="text/javascript">

    var checkAfterPhone = '';

    $(function () {
        $('#password-1').on('tap', function () {
            mui.toast('请输入6~18位密码');
        })
        //根据是否同意协议来决定是否能注册
        $('#accept').on('tap', function () {
            if ($(this).attr('src') == "../images/yellow-gou.png") {
                $(this).attr('src', '../images/no-sel.png');
                $('.sign').attr('disabled', 'true')
            } else {
                $(this).attr('src', '../images/yellow-gou.png');
                $('.sign').removeAttr('disabled');
            }
        })

        //验证码
        var click = true;
        $('.button').on('tap', function () {
            if (click) {
                var hm = /^1[34578]\d{9}$/;
                var phone = $('#number').val();
                if (phone == '' || (!hm.test(phone))) {
                    mui.alert('手机号码不正确', '提示');
                } else {
                    $.ajax({
                        url: ur + "rest/appUserController/checkCode",
                        dataType: "json",
                        async: true,
                        data: {
                            "phone": phone,
                            "type": "register"
                        },
                        type: "POST",
                        beforeSend: function () {
                        },
                        success: function (data) {
                            if (data.meta.code == 'S002') {
                                checkAfterPhone = phone;
                                click = false;
                                mui.toast('验证消息已发送');
                                var ti = 60;
                                var time = setInterval(function () {
                                    ti--;
                                    $('#button-button').text(ti + '(s)');
                                    $('#button-button').css('background', '#ccc');
                                    if (ti == 1) {
                                        clearInterval(time);
                                        $('#button-button').css('background', '#f8bc02');
                                        $('#button-button').text('获取验证码');
                                        click = true;
                                    }
                                }, 1000);
                            } else {
                                mui.toast('系统异常');
                            }
                        }
                    });
                }
            }
        });

        // 注册
        $('.sign').on('tap', function (event) {
            var phone = $('#number').val();
            var phone_reg = /^1[34578]\d{9}$/;
            var PW_reg = /^[u4E00-u9FA5]{6,18}$/; // 非中文密码
            if (phone == '' || (!phone_reg.test(phone)) || (checkAfterPhone !== phone)) {
                mui.alert('手机号码不正确', '提示');
            } else if (!PW_reg.test($('#password-1').val())) {
                mui.alert('请填写6~18位密码', '提示');
            } else if ($('#password-1').val() == '') {
                mui.alert('密码不能为空', '提示');
            } else if ($('#yan').val() == '') {
                mui.alert('请输入验证码', '提示');
            } else {
                $.ajax({
                    url: ur + 'rest/appUserController/create',
                    type: 'POST', dataType: 'json',
                    data: {
                        "phone": $('#number').val(),
                        "password": $('#password-1').val(),
                        "checkCode": $('#yan').val(),
                        "nickName": $('#number').val()
                    },
                    /*contentType: "application/json",*/
                })
                    .done(function (data) {
                        if (data.meta.code == 'E002') {
                            mui.toast(data.meta.message);
                        } else if (data.meta.code == 'S002') {
                            denglu();
                        } else if (data.meta.code == 'E003') {
                            mui.toast(data.meta.message);
                        }
                    })
                    .fail(function () {
                    })
                    .always(function () {
                    });
            }
        })
    })
    //登录
    function denglu() {
        $.ajax({
            url: ur + 'rest/appUserController/login',
            type: 'POST',
            dataType: 'json',
            data: {
                "phone": $('.number').val(),
                "pass": $('#password-1').val()
            }
        })
            .done(function (data) {

                if (data.meta.code == 'S002') {
                    console.log('denglu');
                    localStorage.token = data.data.token;
                    if (localStorage.quick == 0) {
                        mui.toast('欢迎来到小马时贷');
                        localStorage.loadphone = $('.number').val();
                        href('head-foot-demo.html');
                    } else {
                        bindUser();
                    }
                } else if (data.meta.code == 'E002') {
                    mui.toast('用户名或密码错误');
                }
            })
            .fail(function () {
            })
            .always(function () {
            });
    }

    //	绑定快速登录
    function bindUser() {
        $.ajax({
            url: ur + 'rest/appUserController/bind-user',
            type: 'POST',
            dataType: 'json',
            headers: {
                "X-Token": localStorage.token
            },
            data: {
                "openid": localStorage.openid,
                "params": '',
                "type": localStorage.type
            },
            success: function (data) {
//                plus.nativeUI.closeWaiting();
                if (data.meta.code == 'S002') {
                    mui.toast('欢迎来到小马时贷');
                    href('head-foot-demo.html#/home');
                } else {
                    mui.toast('系统异常');
                }
            },
            error: function (e) {
            }
        })
    }
</script>
</body>

</html>